<script>
export default {
    name: 'KeywordChart',
    props: {
        data: {
            type: Array,
            default: () => []
        },
        title: {
            type: String,
            default: ''
        },
        num: {
            type: Number,
            default: 0
        },
        yName: {
            type: String,
        }
    },
    computed: {
        chartOption() {
            return {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    inverse:true
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: false,
                    splitLine: {
                        show:false
                    },
                    
                },
                dataset: {
                    dimensions: ['rank', 'keyWord', 'totalSearch', 'totalUser'],
                    source: this.data.slice(0, 10)
                },
                series: [  
                    {
                        type: 'line',
                        encode: {
                            x: 'keyWord',
                            y: this.yName
                        },
                        lineStyle: {
                            color: 'blue',
                            width: 2
                        },
                        areaStyle: {
                            color: 'lightblue'
                        },
                        symbol: 'none',//去掉折线图上的圆点
                        
                    },
                ],
                grid: {  
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0
                }
            }
        },
        

    },
    watch: {
        chartOption:(newValue)=>{
            console.log(newValue)
        }
    }
}

</script> 
<template>
    <div class="keyword-chart">
        <div class="chart-title">
            <div class="title">{{ title }} </div>
            <div class="num">{{ num }}</div>
        </div>
        <div class="chart">
            <v-chart :option="chartOption" style="width:100%;height: 50px"></v-chart>
        </div>
    </div>
</template> 
<style scoped>
.title{
    font-size: 14px;
    color: #727171;
}
.num{
    font-size: 20px;
    font-weight: 600;
    margin-top: 10px;
}
.keyword-chart{
    width: 100%;
}
</style>